﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html class="no-js" lang="">

<head>
    <!-- Meta Data -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cirkle | Shop</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/Directory/${pageContext.request.contextPath}/Directory/media/favicon.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/icofont/icofont.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/slick-carousel/css/slick.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/slick-carousel/css/slick-theme.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/magnific-popup/css/magnific-popup.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/sal.js/sal.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/mcustomscrollbar/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/select2/css/select2.min.css">

    <!-- Site Stylesheet -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/app.css">
    <!-- Google Web Fonts -->
    <link href="${pageContext.request.contextPath}/Directory/https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400&display=swap" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/assets/js/app.js"></script>
    <style>
        .tupian{
            width: 250px;
            height: 250px;
        }
    </style>
</head>

<body class="bg-link-water">
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="${pageContext.request.contextPath}/Directory/https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<a href="#wrapper" data-type="section-switch" class="scrollup">
    <i class="icofont-bubble-up"></i>
</a>
<!-- Preloader Start Here -->
<div id="preloader"></div>
<!-- Preloader End Here -->
<div id="wrapper" class="wrapper">
    <!-- Top Header -->
    <%@include file="top.jsp" %>
    <!-- Sidebar Left -->
    <%@include file="left.jsp" %>
    <!-- Sidebar Right -->
    <%@include file="right.jsp" %>
    <!-- Page Content -->
    <div class="page-content">

        <!--=====================================-->
        <!--=        Newsfeed  Area Start       =-->
        <!--=====================================-->
        <div class="container">
            <div class="product-page">
                <div class="product-breadcrumb block-box">
                    <div class="breadcrumb-area">
                        <h1 class="item-title">店铺页面</h1>
                        <ul>
                            <li>
                                <a href="${pageContext.request.contextPath}/Directory/index">首页</a>
                            </li>
                            <li>商店</li>
                        </ul>
                    </div>
                </div>

                <div class="block-box product-filter">
                    <label>Filter By:</label>
                    <div class="select-box">
                        <select class="select2" data-placeholder="Select a Category" name="sclassification" id="sclassification">
                            <option value="0">全部</option>
                            <option value="1">电子产品</option>
                            <option value="2">男士时尚</option>
                            <option value="3">女装时尚</option>
                            <option value="4">手机配件</option>
                            <option value="5">电脑配件</option>
                            <option value="6">玩具百货</option>
                        </select>
                        <select class="select2" data-placeholder="Sort by">
                            <option value="1">按受欢迎程度排序</option>
                            <option value="2">按新排序</option>
                            <option value="3">依旧排序</option>
                        </select>
                    </div>
                    <div class="filter-btn">
                        <%--<a href="${pageContext.request.contextPath}/Directory/#" class="item-btn"></a>--%>
                        <input type="button" value="Filter Product" style="border: none;" class="item-btn" onclick="b()">
                    </div>
                </div>

                <div class="row a1">
                    <%--<c:forEach var="xs" items="${list}">--%>
                    <%--<div class="col-lg-4 col-md-6">--%>
                        <%--<div class="block-box product-box">--%>
                            <%--<div class="product-img">--%>
                                <%--<a href="${pageContext.request.contextPath}/Directory/single-shop"><img src="${pageContext.request.contextPath}/static/media/figure/${xs.simg}" alt="product"></a>--%>
                            <%--</div>--%>
                            <%--<div class="product-content">--%>
                                <%--<div class="item-category">--%>
                                    <%--<a href="${pageContext.request.contextPath}/Direc tory/#">${xs.sdetails}</a>--%>
                                <%--</div>--%>
                                <%--<h3 class="product-title"><a href="${pageContext.request.contextPath}/Directory/single-shop">${xs.stitle}</a></h3>--%>
                                <%--<div class="product-price">$${xs.sprice}</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--</c:forEach>--%>

                    <%--<div class="col-lg-4 col-md-6">--%>
                        <%--<div class="block-box product-box">--%>
                            <%--<div class="product-img">--%>
                                <%--<a href="${pageContext.request.contextPath}/Directory/single-shop"><img src="${pageContext.request.contextPath}/static/media/figure/product_2.png" alt="product"></a>--%>
                            <%--</div>--%>
                            <%--<div class="product-content">--%>
                                <%--<div class="item-category">--%>
                                    <%--<a href="${pageContext.request.contextPath}/Directory/#">COFFEE MUGS</a>--%>
                                <%--</div>--%>
                                <%--<h3 class="product-title"><a href="${pageContext.request.contextPath}/Directory/single-shop">Black Coffee Mug</a></h3>--%>
                                <%--<div class="product-price">$29</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="col-lg-4 col-md-6">--%>
                        <%--<div class="block-box product-box">--%>
                            <%--<div class="product-img">--%>
                                <%--<a href="${pageContext.request.contextPath}/Directory/single-shop"><img src="${pageContext.request.contextPath}/static/media/figure/product_3.png" alt="product"></a>--%>
                            <%--</div>--%>
                            <%--<div class="product-content">--%>
                                <%--<div class="item-category">--%>
                                    <%--<a href="${pageContext.request.contextPath}/Directory/#">COFFEE MUGS</a>--%>
                                <%--</div>--%>
                                <%--<h3 class="product-title"><a href="${pageContext.request.contextPath}/Directory/single-shop">Black Coffee Mug</a></h3>--%>
                                <%--<div class="product-price">$29</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="col-lg-4 col-md-6">--%>
                        <%--<div class="block-box product-box">--%>
                            <%--<div class="product-img">--%>
                                <%--<a href="${pageContext.request.contextPath}/Directory/single-shop"><img src="${pageContext.request.contextPath}/static/media/figure/product_4.png" alt="product"></a>--%>
                            <%--</div>--%>
                            <%--<div class="product-content">--%>
                                <%--<div class="item-category">--%>
                                    <%--<a href="${pageContext.request.contextPath}/Directory/#">COFFEE MUGS</a>--%>
                                <%--</div>--%>
                                <%--<h3 class="product-title"><a href="${pageContext.request.contextPath}/Directory/single-shop">Black Coffee Mug</a></h3>--%>
                                <%--<div class="product-price">$29</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="col-lg-4 col-md-6">--%>
                        <%--<div class="block-box product-box">--%>
                            <%--<div class="product-img">--%>
                                <%--<a href="${pageContext.request.contextPath}/Directory/single-shop"><img src="${pageContext.request.contextPath}/static/media/figure/product_5.png" alt="product"></a>--%>
                            <%--</div>--%>
                            <%--<div class="product-content">--%>
                                <%--<div class="item-category">--%>
                                    <%--<a href="${pageContext.request.contextPath}/Directory/#">COFFEE MUGS</a>--%>
                                <%--</div>--%>
                                <%--<h3 class="product-title"><a href="${pageContext.request.contextPath}/Directory/single-shop">Black Coffee Mug</a></h3>--%>
                                <%--<div class="product-price">$29</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="col-lg-4 col-md-6">--%>
                        <%--<div class="block-box product-box">--%>
                            <%--<div class="product-img">--%>
                                <%--<a href="${pageContext.request.contextPath}/Directory/single-shop"><img src="${pageContext.request.contextPath}/static/media/figure/product_6.png" alt="product"></a>--%>
                            <%--</div>--%>
                            <%--<div class="product-content">--%>
                                <%--<div class="item-category">--%>
                                    <%--<a href="${pageContext.request.contextPath}/Directory/#">COFFEE MUGS</a>--%>
                                <%--</div>--%>
                                <%--<h3 class="product-title"><a href="${pageContext.request.contextPath}/Directory/single-shop">Black Coffee Mug</a></h3>--%>
                                <%--<div class="product-price">$29</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="col-lg-4 col-md-6">--%>
                        <%--<div class="block-box product-box">--%>
                            <%--<div class="product-img">--%>
                                <%--<a href="${pageContext.request.contextPath}/Directory/single-shop"><img src="${pageContext.request.contextPath}/static/media/figure/product_7.png" alt="product"></a>--%>
                            <%--</div>--%>
                            <%--<div class="product-content">--%>
                                <%--<div class="item-category">--%>
                                    <%--<a href="${pageContext.request.contextPath}/Directory/#">COFFEE MUGS</a>--%>
                                <%--</div>--%>
                                <%--<h3 class="product-title"><a href="${pageContext.request.contextPath}/Directory/single-shop">Black Coffee Mug</a></h3>--%>
                                <%--<div class="product-price">$29</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="col-lg-4 col-md-6">--%>
                        <%--<div class="block-box product-box">--%>
                            <%--<div class="product-img">--%>
                                <%--<a href="${pageContext.request.contextPath}/Directory/single-shop"><img src="${pageContext.request.contextPath}/static/media/figure/product_8.png" alt="product"></a>--%>
                            <%--</div>--%>
                            <%--<div class="product-content">--%>
                                <%--<div class="item-category">--%>
                                    <%--<a href="${pageContext.request.contextPath}/Directory/#">COFFEE MUGS</a>--%>
                                <%--</div>--%>
                                <%--<h3 class="product-title"><a href="${pageContext.request.contextPath}/Directory/single-shop">Black Coffee Mug</a></h3>--%>
                                <%--<div class="product-price">$29</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="col-lg-4 col-md-6">--%>
                        <%--<div class="block-box product-box">--%>
                            <%--<div class="product-img">--%>
                                <%--<a href="${pageContext.request.contextPath}/Directory/single-shop"><img src="${pageContext.request.contextPath}/static/media/figure/product_9.png" alt="product"></a>--%>
                            <%--</div>--%>
                            <%--<div class="product-content">--%>
                                <%--<div class="item-category">--%>
                                    <%--<a href="${pageContext.request.contextPath}/Directory/#">COFFEE MUGS</a>--%>
                                <%--</div>--%>
                                <%--<h3 class="product-title"><a href="${pageContext.request.contextPath}/Directory/single-shop">Black Coffee Mug</a></h3>--%>
                                <%--<div class="product-price">$29</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                </div>

                <div class="block-box load-more-btn">
                    <p class="item-btn" onclick="b()"><i class="icofont-refresh"></i>Load More</p>
                </div>

            </div>
        </div>

        <!--=====================================-->
        <!--=        Footer Area Start       	=-->
        <!--=====================================-->
        <footer class="footer-wrap footer-dashboard">
            <div class="main-footer">
                <div class="container">
                    <div class="row row-cols-lg-4 row-cols-sm-2 row-cols-1">
                        <div class="col">
                            <div class="footer-box">
                                <div class="footer-logo">
                                    <a href="${pageContext.request.contextPath}/Directory/index"><img src="${pageContext.request.contextPath}/static/media/logo_dark.png" alt="Logo"></a>
                                </div>
                                <p>Dorem ipsum dolor sit amet consec adipisicing elit sed do eiusmod por incidiut labore et loreLorem ipsum kelly amieo dolorey.</p>
                            </div>
                        </div>
                        <div class="col d-flex justify-content-lg-center">
                            <div class="footer-box">
                                <h3 class="footer-title">
                                    Important Links
                                </h3>
                                <div class="footer-link">
                                    <ul>
                                        <li><a href="${pageContext.request.contextPath}/Directory/index">Home</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/about-us">About us</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/shop">Shop</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/contact">Contacts</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col d-flex justify-content-lg-center">
                            <div class="footer-box">
                                <h3 class="footer-title">
                                    Community
                                </h3>
                                <div class="footer-link">
                                    <ul>
                                        <li><a href="${pageContext.request.contextPath}/Directory/newsfeed">NewsFeed</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/user-timeline">Profile</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/user-friends">Friends</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/user-groups">Groups</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/forums">Forums</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col d-flex justify-content-lg-center">
                            <div class="footer-box">
                                <h3 class="footer-title">
                                    Followers
                                </h3>
                                <div class="footer-link">
                                    <ul>
                                        <li><a href="${pageContext.request.contextPath}/Directory/https://www.facebook.com/">facebook</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/https://twitter.com/">twitter</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/https://www.instagram.com/">instagram</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/https://www.youtube.com/">Youtube</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-copyright">Copy© cirkle 2021. All Rights By <a href="${pageContext.request.contextPath}/Directory/http://www.bootstrapmb.com/">bootstrapmb</a></div>
            </div>
        </footer>



    </div>
    <!-- Chat Modal Here -->
    <div class="chat-conversion-box" id="chat-box-modal" tabindex="-1" aria-labelledby="chat-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="chat-modal-label">Fahim Rahman <span class="online"></span></h6>
                    <div class="action-icon">
                        <button class="chat-shrink"><i class="icofont-minus"></i></button>
                        <button type="button" class="close chat-close chat-open" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <ul class="chat-conversion">
                        <li class="chat-others">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_12.jpg" alt="Chat">
                            </div>
                            <div class="author-text">
                                <span>How are you Fahim vai ? Tommorow office will be your last day of Bachelor life.</span>
                            </div>
                        </li>
                        <li class="chat-you">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_11.jpg" alt="Chat">
                            </div>
                            <div class="author-text">
                                <span>hmm That's great</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Write your text here.....">
                            <div class="chat-plus-icon"><i class="icofont-plus-circle"></i></div>
                            <div class="file-attach-icon">
                                <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-slightly-smile"></i></a>
                                <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-camera"></i></a>
                                <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-image"></i></a>
                                <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-mic"></i></a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Jquery Js -->
<script src="${pageContext.request.contextPath}/static/dependencies/jquery/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/popper.js/js/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/imagesloaded/js/imagesloaded.pkgd.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/isotope-layout/js/isotope.pkgd.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/slick-carousel/js/slick.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/sal.js/sal.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/magnific-popup/js/jquery.magnific-popup.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/select2/js/select2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/elevate-zoom/jquery.elevatezoom.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/bootstrap-validator/js/validator.min.js"></script>
<script src="http://www.google.cn/maps/api/js?key=AIzaSyBtmXSwv4YmAKtcZyyad9W7D4AC08z0Rb4"></script>
    <script>
        function wy() {
            var sclass=$("#sclassification").val();
            $.ajax({
                "url":"${pageContext.request.contextPath}/getshopping",
                "Type":"GET",
                "data":"sclassification="+sclass,
                "dataType":"JSON",
                "success":function (data) {
                    var a="";
                    $(data).each(function () {
                        a+="<div class='col-lg-4 col-md-6 aaa'>";
                        a+="<div class='block-box product-box bbb'>";
                        a+="<div class='product-img'>";
                        a+="<a href='${pageContext.request.contextPath}/singleshop?sid="+this.sid+"'><img src='${pageContext.request.contextPath}/static/img/"+this.simg+"' alt='product' style='width:250;height:250;'></a>";
                        a+="</div>";
                        a+="<div class='product-content'>";
                        a+="<div class='item-category'>";
                        a+="<a href='${pageContext.request.contextPath}/Direc tory/#'>"+this.sdetails+"</a>";
                        a+="</div>";
                        a+="<h3 class='product-title'><a href='${pageContext.request.contextPath}/Directory/single-shop'>"+this.stitle+"</a></h3>";
                        a+="<div class='product-price'>$"+this.sprice+"</div>";
                        a+="</div>";
                        a+="</div>";
                        a+="</div>";
                    });
                    $(".a1").append(a);
                }
            })
        }
        wy();
        function b() {
            $(".aaa").remove();
            wy();
        }
    </script>
<!-- Site Scripts -->
<script src="${pageContext.request.contextPath}/static/assets/js/app.js"></script>
</body>
<style>
    .aaa{
        width: auto;
        height: 450px;
    }
    .bbb{
        width: auto;
        height: 420px;
    }
</style>
</html>
